


import { optionList, compareOption } from '../data'
export default {
  // name: 'configDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    isEdit: Boolean,
    configData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      dialogVisible: false,
      formData: this.formDataInit(),
      rules: {
        type: [
          { required: true, message: '不能为空', trigger: 'change' }
        ],
        compare: [
          { required: true, message: '不能为空', trigger: 'change' }
        ],
        compareValue: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        regular: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ]
      },
      // 判断是否是提交，提交不触发close事件
      isSubmit: false
    }
  },
  watch: {
    visible(val) {
      this.dialogVisible = val
      if (val) {
        // 重置
        this.isSubmit = false
      }
    },
    configData: {
      handler(val) {
        this.formData = JSON.stringify(val) === '{}' ? this.formDataInit() : val
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    compareListInit() {
      return {
        compare: '',
        compareValue: ''
      }
    },
    formDataInit() {
      return {
        type: '0',
        regular: '',
        compareList: [
          this.compareListInit()
        ]
      }
    },
    handleChangeVisible() {
      this.close()
    },
    formDataReset() {
      this.formData = this.formDataInit()
      setTimeout(() => {
        this.$refs.formData.clearValidate()
      })
    },
    close() {
      this.$emit('update:visible', false)
      this.formDataReset()
      if (this.isSubmit) return
      this.$emit('close')
    },
    handleChange(val) {
      this.formData.type = val
    },
    handleInput(val) {
      this.formData.regular = val
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.isSubmit = true
          this.$emit('update:visible', false)
          this.$emit('submit', this.formData)
          this.formDataReset()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  },
  render() {
    const compareValueInput = (val, index) => {
      this.formData.compareList[index].compareValue = val
    }
    const compareChange = (val, index) => {
      this.formData.compareList[index].compare = val
    }
    const addClick = (index) => {
      this.formData.compareList.splice(index + 1, 0, this.compareListInit())
    }
    const delClick = (index) => {
      this.formData.compareList.splice(index, 1)
    }
    const regularHtml = <el-form-item label="正则" prop="regular" rules={this.rules.regular}>
      <el-input value={this.formData.regular} onInput={this.handleInput}></el-input>
    </el-form-item>
    const compareHtml = this.formData?.compareList?.map((formItem, index) => {
      return (
        <el-row>
          <el-col span={11}>
            <el-form-item label={index === 0 ? '比较' : ''} prop={`compareList.${index}.compare`} rules={this.rules.compare}>
              <el-select value={formItem.compare} onChange={val => compareChange(val, index)} class="width100">
                {
                  compareOption.map(item => {
                    return (
                      <el-option label={item.label} value={item.value} key={item.value}></el-option>
                    )
                  })
                }
              </el-select>
            </el-form-item>
          </el-col>
          <el-col span={10}>
            <el-form-item labelWidth="10px" prop={`compareList.${index}.compareValue`} rules={this.rules.compareValue} class="mr-15">
              <el-input v-number={{max:100,min:0,precision:2}} value={formItem.compareValue} onInput={val => compareValueInput(val, index)} />
            </el-form-item>
          </el-col>
          <el-col span={1.5}>
            <el-button size="mini" type="text" icon="el-icon-plus" onClick={() => addClick(index)} />
            {index !== 0 && <el-button size="mini" type="text" icon="el-icon-minus" onClick={() => delClick(index)} />}
          </el-col>
        </el-row>
      )
    })
    return (
      <el-dialog
        title="设置"
        visible={this.dialogVisible}
        onClose={this.close}
        closeOnClickModal={false}
        width="500px"
      >
        <el-form labelWidth="80px" size="mini" ref="formData" props={{ model: this.formData }} >
          <el-form-item label="条件类型" prop='type' rules={this.rules.type}>
            <el-select class="width100" value={this.formData.type} onChange={this.handleChange}>
              {
                optionList.map(item => {
                  return (
                    <el-option label={item.label} value={item.value} key={item.value}></el-option>
                  )
                })
              }
            </el-select>
          </el-form-item>
          {this.formData.type === '0' ? regularHtml : compareHtml}
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button onClick={this.handleChangeVisible}>取 消</el-button>
          <el-button type="primary" onClick={() => this.submitForm('formData')}>确 定</el-button>
        </span>
      </el-dialog>
    )
  }
}